<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委派</title>
</head>
<body>
<table border="1" cellspacing="0" width="50%" align="center">
    <tr align="center">
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
</body>
<!--用于表格动态的添加数据-->
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    $("table").delegate("tr","mouseover",function(){
        $(this).css("background","pink");
    });
    $("table").delegate("tr","mouseout",function(){
        $(this).css("background","white");
    });
    for (let i = 0; i <3; i++) {
        $("table").append("<tr align='center'>\n"+
                                "<td>1</td>\n"+
                                "<td>2</td>\n"+
                                "<td>3</td>\n"+
                                "<td>4</td>\n"+
                            "</tr>")
    }
</script>
</html>